<template>
  <div class="InterfaceTest">
    <Nav></Nav>
    <div class="writing_right">
      <div class="InterfaceTestTitleList">
        <div class="TitleList_padding">
          <div class="TitleList_top">
            <div class="parametersettings_content_top">
              <div class="content_top_logo"><img src="@a/img/logo2.png"/></div>
              <span class="content_top_span1"></span>
              <div class="content_top_icon"><img src="@a/img/sv13.svg"/></div>
              <span class="content_top_span2"></span>
              <div class="content_top_logo"><img :src="demo_logo"/></div>
            </div>
            <div class="TitleList_top_title">
              <span>AI-DOG</span>与<span>[{{ demo_name }}]</span>建立数据通道
            </div>
          </div>
        </div>

        <div class="emailmo_step">
          <div class="emailmo_step_list on">
            <div class="step_list_icon">1</div>
            <div class="step_list_title">安装插件</div>
          </div>
          <span></span>
          <div class="emailmo_step_list on">
            <div class="step_list_icon">2</div>
            <div class="step_list_title">网站信息</div>
          </div>
          <span></span>
          <div class="emailmo_step_list on">
            <div class="step_list_icon">3</div>
            <div class="step_list_title">添加成功</div>
          </div>
        </div>

        <div class="addedSuccessfully_content">
          <div class="InterfaceTest">
            <div class="Preview_content">
              <div class="Preview_content_title">
                <div class="content_title_left"><span></span>测试发布</div>
              </div>
              <div class="Edit_content">
                <div class="Edit_content_list interface">
                  <div class="content_list_dd">
                    请求url
                  </div>
                  <div class="content_list_dt">
                    <span>{{ testData.url }}</span>
                    <!--                                  <span> https://www.afd.esign/add.php?pw=123456</span>-->
                  </div>
                </div>
                <div class="InterfaceTest_nav">
                  <div class="InterfaceTest_nav_list" @click="showTab(1)" :class="{ active: currentTab === 1 }">Post参数
                  </div>
                  <!--                          <div class="InterfaceTest_nav_list" @click="showTab(2)" :class="{ active: currentTab === 2 }">Headers</div>-->
                </div>
                <div v-if="currentTab === 1">
                  <div class="Edit_content_list">
                    <div class="content_list_dd">
                      标题
                    </div>
                    <div class="content_list_dt">
                      <el-input
                          placeholder="接口测试信息标题"
                          v-model="testData.title"
                          clearable>
                      </el-input>
                    </div>
                  </div>
                  <div class="Edit_content_list">
                    <div class="content_list_dd">
                      栏目
                    </div>
                    <div class="content_list_dt">
                      <el-select v-model="testData.catid" placeholder="请选择">
                        <el-option
                            v-for="item in site_classes"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                        </el-option>
                      </el-select>
                    </div>
                  </div>

                  <div class="Edit_content_list">
                    <div class="content_list_dd">
                      时间
                    </div>
                    <div class="content_list_dt">
                      <el-date-picker
                          v-model="testData.newstime"
                          align="right"
                          type="datetime"
                          placeholder="选择日期时间" />
                    </div>
                  </div>

                  <div class="Edit_content_list" v-if="info.thumbnail_field">
                    <div class="content_list_dd">
                      图片
                    </div>
                    <div class="content_list_dt">
                      <el-input
                          placeholder="测试图片"
                          v-model="testData.thumb"
                          clearable>
                      </el-input>
                    </div>
                  </div>

                  <div class="Edit_content_list" v-if="info.keywords_field">
                    <div class="content_list_dd">
                      keywords
                    </div>
                    <div class="content_list_dt">
                      <el-input
                          placeholder="keywords"
                          v-model="testData.keywords"
                          clearable>
                      </el-input>
                    </div>
                  </div>
													  
                  <div class="Edit_content_list" v-if="info.description_field">
                    <div class="content_list_dd">
                      description
                    </div>
                    <div class="content_list_dt">
                      <el-input
                          placeholder="description"
                          v-model="testData.description"
                          clearable>
                      </el-input>
                    </div>
                  </div>													  

                  <div class="Edit_content_list fstart">
                    <div class="content_list_dd">
                      内容
                    </div>
                    <div class="content_list_dt">
                      <el-input
                          type="textarea"
                          :autosize="{ minRows: 4, maxRows: 4}"
                          placeholder="测试信息内容"
                          v-model="testData.content">
                      </el-input>
                    </div>
                  </div>

                  <div class="Edit_content_list fstart">
                    <div class="content_list_dd">
                      其它字段
                    </div>
                    <div class="content_list_dt">
                      <el-input
                          type="textarea"
                          :autosize="{ minRows: 4, maxRows: 4}"
                          placeholder="其它字段"
                          v-model="testData.other_fields">
                      </el-input>
                    </div>
                  </div>

                </div>
                <div v-if="currentTab === 2">
                  <div class="Edit_content_list fstart">
                    <div class="content_list_dd">
                      Headers
                    </div>
                    <div class="content_list_dt">
                      <el-input
                          type="textarea"
                          :autosize="{ minRows: 4, maxRows: 4}"
                          placeholder="测试信息内容"
                          v-model="testData.content">
                      </el-input>
                    </div>
                  </div>
                </div>

              </div>
              <div class="Edit_btn">
                <button class="save" @click="testPush">提交测试数据</button>
              </div>
              <div class="InterfaceTest_nav">
                <div class="InterfaceTest_nav_list" @click="showTab2(1)" :class="{ active: currentTab2 === 1 }">响应内容
                </div>
                <div class="InterfaceTest_nav_list" @click="showTab2(2)" :class="{ active: currentTab2 === 2 }">
                  Headers
                </div>
              </div>
              <div class="Edit_content">
                <div class="Edit_content_list fstart" v-if="currentTab2 === 1">
                  <div class="content_list_dd">
                    响应内容
                  </div>
                  <div class="content_list_dt">
                    <el-input
                        type="textarea"
                        :autosize="{ minRows: 14, maxRows: 14}"
                        placeholder=""
                        v-model="content">
                    </el-input>
                  </div>
                </div>

                <div class="Edit_content_list fstart" v-if="currentTab2 === 2">
                  <div class="content_list_dd">
                    Headers
                  </div>
                  <div class="content_list_dt">
                    <el-input
                        type="textarea"
                        :autosize="{ minRows: 14, maxRows: 14}"
                        placeholder=""
                        v-model="headers">
                    </el-input>
                  </div>
                </div>
                <div class="Edit_btn">
<!--                  <button class="save" @click="go_edit">返回编辑</button>-->
                  <button class="back" @click="go_list">返回列表</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Nav from "@c/common/nav/nav";
function getCurrentTime(is_second = true) {
  const now = new Date();
  const year = now.getFullYear();
  const month = String(now.getMonth() + 1).padStart(2, '0');
  const day = String(now.getDate()).padStart(2, '0');
  const hours = String(now.getHours()).padStart(2, '0');
  const minutes = String(now.getMinutes()).padStart(2, '0');
  const seconds = String(now.getSeconds()).padStart(2, '0');
  let  formattedTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
  if(!is_second){
    formattedTime = `${year}-${month}-${day} ${hours}:${minutes}`;
  }
  return formattedTime;
}

let timeNow = getCurrentTime(false);
let timeNow_full = getCurrentTime(true);

export default {
  name: "parametersettings",
  data() {
    return {
      demo_name: '',
      demo_logo: '',
      currentTab: 1,
      currentTab2: 1,
      isShow: true,
      testData: {
        title: timeNow + '测试标题',
        url: '',
        catid: '',
		thumb:'https://www.ai-dog.net/skin/images/bg48.jpg',
		other_fields:'',
        newstime: timeNow_full,
		keywords:'关键词1,关键词2,关键词3',
		description:'描述信息描述信息描述信息描述信息描述信息描述信息',
        content: '<p>' + timeNow + '测试内容</p><p><img src="https://www.ai-dog.net/skin/images/bg48.jpg" alt="AIDOG"></p>',

      },
      content: '',
      headers: '',
      info: {},
      site_classes: [],
      showPreview: false,

      value1: '',
      value2: '',
      value3: '',
      value4: '',
      value5: '',
      value6: '',
      value7: '',
      value8: '',
      siteValue: '',
      siteSelect: '',
      urlValue: '',
      textarea1: '',
      textarea2: '',
    };
  },
  components: {
    Nav
  },
  methods: {
    go_list(){
      this.$router.push(
          {
            path: '/writing/siteManagement'
          }
      )
    },
    go_edit(){
      this.$router.push(
          {
            path: '/writing/siteManagement/parameterSettings?sid' + this.$route.query.id
          }
      )
    },
    testPush() {
      this.content = '';
      this.headers = '';
      let that = this;

      that.axios.post('/api/site/testPush', {
        'site': that.info,
        'data': that.testData
      }).then(res => {
        if (res.code === 1) {
          if(res.msg == 1){
            that.$msgbox('提交测试数据成功', '提示')
          }else{
            that.$msgbox('提交测试数据失败', '提示')
          }

          that.content = res.result.body
          that.headers = res.result.header
        } else {
          that.$msgbox(res.result, '提交测试数据失败')
        }
      })
    },
    toTest() {
      let that = this;
      let https = that.info.is_https ? 'https://' : 'http://';
      let split_flag = '?';

      if(that.info.column_interface.includes("?") ){
        split_flag = '&';
      }
      this.axios.post('/api/site/getClassesByUrl', {
        url: https + that.info.website + that.info.column_interface + split_flag +'key=' + that.info.secret_key
      }).then(res => {
        if (res.code === 1) {

          let split_flag1 = '?';

          if(that.info.publishing_interface.includes("?") ){
            split_flag1 = '&';
          }
          that.site_classes = res.result
          that.testData.url = https + that.info.website + that.info.publishing_interface  + split_flag1 +'key='  + that.info.secret_key
          that.showPreview = true

        } else {
          that.$msgbox(res.result, '获取栏目错误')
        }
      })

    },
    save() {

      let that = this;
      that.axios.post('/api/site/add', that.info).then(res => {
        if (res.code === 1) {
          this.$router.push({path: '/writing/siteManagement'})

        }
      })
    },
    goOff() {
      this.$router.go(-1);
    },
    advancedClick() {
      this.advanced = !this.advanced
    },
    showTab(tabIndex) {
      this.currentTab = tabIndex;
    },
    showTab2(tabIndex) {
      this.currentTab2 = tabIndex;
    },


    getData() {
      let that = this;
      let id = this.$route.query.id
      if (id) {
        that.axios.get('/api/site/getSite', {
          params: {
            id
          }
        }).then(res => {
          if (res.code === 1) {
            that.info = res.result;
			that.testData.other_fields=that.info.other_fields;
            that.toTest()


            let demo_id = res.result.site_demo_id
            that.axios.get('/api/site/getDemo', {
              params: {
                id: demo_id
              }
            }).then(res => {
              if (res.code === 1) {
                that.demo_name = res.result.name;
                that.demo_logo = res.result.logo_image
              }
            })
          }
        })
      }


    }
  },
  created() {
    this.getData()
  },
}
</script>

<style>
@import "InterfaceTest.css";
</style>
